<template>
  <div class="news">
    <div class="header">
      <div class="left">
        <router-link tag="a" to="/home">
          <img src="../assets/img/fanhui.png" alt="" />
        </router-link>
      </div>
      <div class="mid" v-if="active==0">锁业快讯</div>
      <div class="mid" v-if="active==1">锁艺人物</div>
      <div class="mid" v-if="active==2">民用锁艺</div>
      <div class="mid" v-if="active==3">防盗专栏</div>
      <div class="right">
        <a>
          <router-link tag="div" to="/search" class="img">
            <img src="../assets/img/fdj.png" alt="" />
          </router-link>
        </a>
      </div>
    </div>

    <div class="nav">
      <van-tabs v-model="active">
        
        <van-tab title="锁业快讯">
          <div class="items">
            <router-link tag="div" :to="'/details?id='+item.id" class="item" v-for="(item, index) in wordList" :key="index">
              <p>{{ item.title }}</p>
              <span
                >{{ item.content }}
                <em>{{ item.num }}阅读<i>热</i></em>
              </span>
            </router-link>
          </div>
        </van-tab>

        <van-tab title="锁艺人物">
          <div class="itemz">
            <router-link tag="div" :to="'/details?id='+item.id" class="item" v-for="(item,index) in picList" :key="index">
              <img :src="item.img" alt="">
              <h3><span>{{item.name}}</span></h3>
            </router-link>
          </div>
        </van-tab>

        <van-tab title="民用锁艺">
          <div class="items">
            <router-link tag="div" :to="'/details?id='+item.id" class="item" v-for="(item, index) in wordList" :key="index">
              <p>{{ item.title }}</p>
              <span
                >{{ item.content }}
                <em>{{ item.num }}阅读<i>热</i></em>
              </span>
            </router-link>
          </div>
        </van-tab>

        <van-tab title="防盗专栏">
          <div class="items">
            <router-link tag="div" :to="'/details?id='+item.id" class="item" v-for="(item, index) in wordList" :key="index">
              <p>{{ item.title }}</p>
              <span
                >{{ item.content }}
                <em>{{ item.num }}阅读<i>热</i></em>
              </span>
            </router-link>
          </div>
        </van-tab>

      </van-tabs>
    </div>

    <div class="duo"></div>

    <div class="footer">
      <ul>
        <router-link tag="li" to="/home">
          <a>
            <div class="img">
              <img src="../assets/img/shouye.png" alt="" />
            </div>
            <div class="word">
              <p>首页</p>
            </div>
          </a>
        </router-link>
        <router-link tag="li" to="/talk">
          <a>
            <div class="img">
              <img src="../assets/img/taolun.png" alt="" />
            </div>
            <div class="word">
              <p>交流</p>
            </div>
          </a>
        </router-link>
        <router-link tag="li" to="/release">
          <a>
            <div class="img">
              <img src="../assets/img/fabulow.png" alt="" />
            </div>
            <div class="word">
              <p>发布</p>
            </div>
          </a>
        </router-link>
        <router-link tag="li" to="/find">
          <a>
            <div class="img">
              <img src="../assets/img/quan.png" alt="" />
            </div>
            <div class="word">
              <p>发现</p>
            </div>
          </a>
        </router-link>
        <router-link tag="li" to="/my">
          <a>
            <div class="img">
              <img src="../assets/img/wo.png" alt="" />
            </div>
            <div class="word">
              <p>我的</p>
            </div>
          </a>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
import {getwordList,getpicList} from "../api/home";
export default {
  props:["CoList"],
  data() {
    return {
      wordList:null,
      picList:null,
      active: 0,
    };
  },
  created(){
    getwordList().then(data=>{
      this.wordList = data.wordList;
    }),
    getpicList().then(data=>{
      this.picList = data.picList;
    })
  }
};
</script>

<style lang="scss" scoped>
.news{
.header {
  width: 100%;
  height: 48px;
  background: #53bcf5;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  align-items: center;
  .left {
    width: 34px;
    text-align: center;
    a {
      color: #fff;
      font-size: 20px;
      img {
        width: 20px;
        height: 20px;
        background-size: 100%;
      }
    }
  }
  .mid {
    flex: 1;
    text-align: center;
    font-size: 18px;
    color: #fff;
  }
  .right {
    .img {
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      margin-right: 12px;
      img {
        width: 100%;
      }
    }
  }
}
.nav {
  margin-top: 53px;
  height: 40px;
  border-bottom: 6px solid #f1f1f1;
  position: fixed;
  top: 0;
  left: 0;
  ul {
    display: flex;
    height: 40px;
    li {
      flex: 1;
      line-height: 40px;
      display: flex;
      justify-content: center;
      a {
        text-align: center;
        font-size: 16px;
        color: #676767;
        &.con {
          display: block;
          color: #0a9bf5;
        }
      }
    }
  }
  .itemz{
    display: flex;
    flex-wrap: wrap;
    .item{
      margin: 10px;
      position: relative;
      width: 44%;
      box-sizing: border-box;
      height: 140px;
      img{
        width: 100%;
        height: 100%;
      }
      h3{
        text-align: center;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        padding:2px;
        font-weight: normal;
        font-size: 13px;
        color: #fff;
        background: rgba(0,0,0,0.3);
        box-sizing: border-box;
        overflow: hidden;
      }
    }
  }
}
.items {
  margin: 0 12px;
  .item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #efefef;
    padding: 8px 0;
    p {
      font-size: 17px;
      color: #333;
    }
    span {
      display: -webkit-box;
      overflow: hidden;
      height: 50px;
      margin-top: 4px;
      font-size: 13px;
      color: #bbb;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      position: relative;
      em {
        position: absolute;
        right: 0;
        bottom: 1px;
        font-size: 13px;
        padding-left: 4px;
        background: #fff;
        font-style: normal;
        color: #000;
        i {
          border: 1px solid #d00;
          font-style: normal;
          font-size: 12px;
          margin-left: 4px;
        }
      }
    }
  }
}
.duo {
  height: 44px;
}
.footer {
  background: #fff;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  ul {
    display: flex;
    li {
      flex: 1;
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        .img {
          width: 24px;
          height: 24px;
          img {
            width: 100%;
          }
        }
        .word {
          p {
            color: #999;
            font-size: 12px;
            &.con {
              color: #45dfe7;
            }
          }
        }
      }
    }
  }
}
}
</style>
